<template>
  <div class="audio-resource__module">
    <div class="title__item">
      <span class="count__item">( {{ resourceCount }} )</span>
      资源列表
      <i class="add-all__btn el-icon-plus" title="全部播放" />
    </div>
    <ul>
      <template v-for="audio in resources">
        <li :class="[ {open:resourceOpen}]" :key="audio.rid" class="resource__item">
          <i @click="playHandler(audio)" class="controller__btn el-icon-video-play" title="播放" />
          <i @click="addPlayListHandler(audio)" class="controller__btn el-icon-plus" title="下一首播放" />
          <i @click="addShouChang(audio)" class="controller__btn el-icon-folder-add" title="收藏" />
          <span class="resource-name__item">{{audio.name}}</span>
        </li>
      </template>
    </ul>
    <div @click="resourceOpen = !resourceOpen" class="resource-show-all__btn" draggable="false">{{resourceOpen ? '收起' : '展开'}}</div>
  </div>
</template>

<script>

export default {
    props: {
        resources: Array,
    },
    data() {
        return {
            resourceOpen: false,
        };
    },
    computed: {
        resourceCount() {
            if (!this.resources) return 0;
            return this.resources.length;
        },
    },
    methods: {
        playHandler(audio) {
            audio.url = `https://resource.miva.work/${audio.path}`;
            this.$store.commit('audio/ADD_AUDIO_TO_PLAYLIST', audio);
        },
        addPlayListHandler(audio) {
            audio.url = `https://resource.miva.work/${audio.path}`;
            this.$store.commit('audio/ADD_AUDIO_NEXT_PLAY', audio);
        },
    },
};
</script>

<style lang="less">
.audio-resource__module {
  .title__item {
    width: 150px;
    margin-bottom: 10px;
    padding: 3px 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 0 4px 4px 0;
    font-size: 16px;
    font-weight: bold;
    background-color: @base_color;
    color: #fff;
    user-select: none;
  }
  .count__item {
    font-size: 12px;
    font-weight: normal;
  }
  .add-all__btn {
    padding-left: 4px;
    border-left: 2px solid;
    &::before {
      font-weight: bold !important;
      cursor: pointer;
    }
  }
  .resource__item {
    height: 35px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid @global_border_color;
    background-color: fade(#fff, 50%);
    &:nth-child(odd) {
      background-color: @base_color_fade;
    }
    &:nth-child(n + 10) {
      display: none;
    }
    &.open {
      display: flex;
    }
    .resource-name__item {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &:hover {
      background-color: fade(@base_color_2, 50%);
    }
  }
  .controller__btn {
    margin-right: 15px;
    font-size: 16px;
    color: @global_text_color;
    transform-origin: center;
    cursor: pointer;
    user-select: none;
    &:hover {
      transform: scale(1.4);
      font-weight: bold;
      color: #fff;
      animation: controllerBtnShow 1s infinite;
    }
  }
  .resource-show-all__btn {
    margin-top: 12px;
    line-height: 18px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
  }
}
@keyframes controllerBtnShow {
  0% {
    @shadow: 0px;
    text-shadow: @shadow @shadow 0 @base_color, -@shadow -@shadow 0 @base_color;
  }
  25% {
    @shadow: 3px;
    text-shadow: @shadow @shadow 0 @base_color, -@shadow -@shadow 0 @base_color;
  }
  50% {
    @shadow: 0px;
    text-shadow: @shadow @shadow 0 @base_color, -@shadow -@shadow 0 @base_color;
  }
  75% {
    @shadow: 3px;
    text-shadow: -@shadow @shadow 0 @base_color, @shadow -@shadow 0 @base_color;
  }
  100% {
    @shadow: 0px;
    text-shadow: @shadow @shadow 0 @base_color, -@shadow -@shadow 0 @base_color;
  }
}
</style>
